import React, {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Form, Card,Icon, Row, Col, Input, Select, Table, Button,Radio,Modal} from 'antd';
import styles from './Shop/ShopManage.less';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import AdminPowerEdit from '../../components/AdminPowerEdit';
import PowerList from '../../components/AdminPowerEdit/powerList/PowerList';
import {routerRedux} from 'dva/router';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);
const FormItem = Form.Item;
const {Option} = Select;
const ButtonGroup=Button.Group;
@connect(state => ({
    adminPowerSetting: state.adminPowerSetting,
}))
@Form.create()
export default class AdminPowerSetting extends Component {

    state = {
        searchValues: {},
        loading: false,
        modalVisible: false,
        userId:'',
        functionType:'GLYPTQXPZ',
        selectedRows: [],
        actionType:'',

    };

    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        });
    }
    componentDidMount() {
        if(!this.props.location.state){
            this.props.dispatch(routerRedux.push("/management/queryManagement"))
            return;
        }
        this.setState({
            userId:this.props.location.state,
            actionType:0,
        })
        this.props.dispatch({
            type: 'adminPowerSetting/queryAdminPowerList',
            payload:{userId:this.props.location.state}
        })
    };


    handleTableChange = (pagination) => {
        const {dispatch} = this.props;
        const {searchValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...searchValues,
        };
        dispatch({
            type: 'adminPowerSetting/queryAdminPowerList',
            payload: params,
        });
    };
    RadioChangeHandle=(event)=>{
        const {userId,functionType}=this.state;
        if(event===0){
            this.props.dispatch({
                type:'adminPowerSetting/queryPowerList',
                payload:{actionType:event,
                    userId:userId,
                    functionType:functionType,
                },
               callback:(response)=>{
                    if(response.result===0){
                         this.setState({
                            selectedRows:this.props.adminPowerSetting.actionList,
                        })
                    }
                }
            })
            this.handleCancel(true);
        }

        this.setState({
            actionType:event,
        })
    }
    columns = () => {
        const columns = [
            {
                title: '用户ID',
                dataIndex: 'user_id',
                key: 'user_id',
            }, {
                title: '用户名',
                dataIndex: 'user_name',
                key: 'user_name',
            }, {
                title: '管理员管理权限列表',
                dataIndex: 'action_list',
                key: 'action_list',
            }, {
                title: '管理员导航栏配置项',
                dataIndex: 'nav_list',
                key: 'nav_list',
            }, {
                title: '管理员角色',
                dataIndex: 'role_id',
                key: 'role_id',
            },
        ];
        return columns;
    };

    handleCancel=(flag)=>{
        this.setState({
            modalVisible:!!flag,
        })
    }
    handleReturn=()=>{
        const {dispatch}=this.props;
        dispatch({
            type:'adminManage/fetch',
        });
        dispatch(routerRedux.push('/management/queryManagement'));
    }
    render() {
        const {modalVisible,selectedRows,userId,actionType,functionType}=this.state;
        const {adminPowerSetting:{data}}=this.props;
        return (
            <PageHeaderLayout title="管理员权限设置">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div style={{margin:10,border:0,padding:0}}>
                            <Button type="primary" onClick={this.handleReturn}>返回</Button>
                            <ButtonGroup>
                                <AuthButton onClick={()=>this.RadioChangeHandle(0)} auth="adminplateconfig">管理员平台权限配置</AuthButton>
                                <AuthButton auth="adminsellerconfig"><Link to={{pathname:'/management/managementSeller',state:this.state.userId}}>管理员商家管理权限配置</Link></AuthButton>
                            </ButtonGroup>

                                {/*<Radio.Group >*/}
                                    {/*<Radio.Button value="0" onClick={(e)=>this.RadioChangeHandle(e)}>管理员平台权限配置</Radio.Button>*/}
                                    {/*<Radio.Button value="1"><Link to={{pathname:'/management/managementSeller',state:this.state.userId}}>管理员商家管理权限配置</Link></Radio.Button>*/}
                                {/*</Radio.Group >*/}
                        </div>
                        <div>
                            <Table
                                columns={this.columns()}
                                dataSource={data.list}
                                rowKey={row => row.user_id}
                                onChange={this.handleTableChange}
                            />
                        </div>
                        <Modal
                            visible={modalVisible}
                            title="管理员权限配置"
                            onCancel={()=>this.handleCancel()}
                            width="50%"
                            footer={null}>
                                <PowerList
                                    selectedRows={selectedRows}
                                    onSelectRow={this.handleSelectRows}
                                    actionType={actionType}
                                    userId={userId}
                                    functionType={functionType}
                                handleCancel={()=>this.handleCancel()}/>
                        </Modal>

                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }
}